//VIP设置

import React from 'react';
import TopSearch from '../UserManagement/components/TopSearch';
import './css/VIP.scss';
import { Select,Switch } from "antd";


const onChange_superior_department = (value: string) => {
  console.log(`selected ${value}`);
};

const onSearch = (value: string) => {
  console.log('search:', value);
};

const items_department = [
  {
    value: '0',
    label: '免费',
  },
  {
    value: '2',
    label: '九折',
  },
  {
    value: '3',
    label: '八折',
  },
  {
    value: '4',
    label: '七折',
  },
  {
    value: '5',
    label: '六折',
  },
  {
    value: '6',
    label: '五折',
  },
  {
    value: '7',
    label: '四折',
  },
  {
    value: '8',
    label: '三折',
  },
  {
    value: '9',
    label: '二折',
  },
  {
    value: '10',
    label: '一折',
  }
];

const onChange = (checked: boolean) => {
  console.log(`switch to ${checked}`);
};
export default function Vip() {
  return (
    <div>
      <TopSearch topName='VIP设置' />
      <div className='div_all'>
        <div className='div_level'>
          <div className='level_left'><p>等级名称</p></div>
          <div className='level_yellow'>至尊SSVIP永久卡</div>
          <div className='level_yellow'>超级SVIP永久卡</div>
        </div>
        <div className='div_level'>
          <div className='level_left'><p>付费视频</p></div>
          <div className='level_one'>
            <Select
              showSearch
              placeholder='请输入折扣'
              optionFilterProp='label'
              onChange={onChange_superior_department}
              onSearch={onSearch}
              options={items_department}
            />
          </div>
          <div className='level_one'>
            <Select
              showSearch
              placeholder='请输入折扣'
              optionFilterProp='label'
              onChange={onChange_superior_department}
              onSearch={onSearch}
              options={items_department}
            />
          </div>
        </div>
        <div className='div_level'>
          <div className='level_left'><p>SVIP标识</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div>
        <div className='div_level'>
          <div className='level_left'><p>SVIP专属活动</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div>
        <div className='div_level'>
          <div className='level_left'><p>视频置顶</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div>
        <div className='div_level'>
          <div className='level_left'><p>私信功能</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div><div className='div_level'>
          <div className='level_left'><p>个性头像</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div><div className='div_level'>
          <div className='level_left'><p>互动评论</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div><div className='div_level'>
          <div className='level_left'><p>无限下载</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div><div className='div_level'>
          <div className='level_left'><p>上传视频</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div><div className='div_level'>
          <div className='level_left'><p>开启状态</p></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
          <div className='level_one'><Switch defaultChecked onChange={onChange} style={{margin:'0px 0.45rem'}} /></div>
        </div>
        
      </div>
    </div>
  );
}
